<template>
  <div class="index-container">
    <el-tabs
      v-model="activename"
      type="border-card"
      @tab-click="handleSelectBuilding"
    >
      <el-tab-pane
        v-for="(item, index) in buildingData"
        :key="index"
        :datafloorid="item.id"
        :name="item.name"
        :label="item.name"
      >
        <el-tabs
          v-model="flooractivename"
          type="card"
          tab-position="left"
          @tab-click="handleTabFloorClick"
        >
          <el-tab-pane
            v-for="(ite, idx) in floorData"
            :key="idx"
            :label="ite.name"
            :datafloorid="ite.id"
            :name="ite.name"
            style="min-height: 400px"
          >
            <el-row :gutter="20">
              <template v-for="floor in pageDataList">
                <el-col
                  :key="floor.id"
                  :xs="24"
                  :sm="12"
                  :md="6"
                  :lg="6"
                  :xl="6"
                >
                  <div class="bedlist-item">
                    <div
                      class="bedlist-item-header"
                      :class="
                        floor.status == 1
                          ? backgroundColor[0]
                          : backgroundColor[2]
                      "
                    >
                      <div class="bedlist-item-hl">{{ floor.room_code }}房</div>
                      <div class="bedlist-item-hr">
                        <div class="bedlist-item-hrt">
                          {{ floor.name }} {{ floor.price }}元/月
                          <div v-if="floor.carer_list.length" style="font-size: 14px;margin-top: 10px;">
                            护工：<span v-for="carer in floor.carer_list" :key="carer.id">{{ carer.name }}，</span> 
                          </div>
                        </div>
                        <div class="bedlist-item-hrb">
                          <el-button
                            type="primary"
                            size="mini"
                            plain
                            @click="handleNurse(floor.id)"
                          >
                            护工管理
                          </el-button>
                          <el-button
                            type="primary"
                            size="mini"
                            plain
                            @click="devicebind(floor)"
                          >
                            设备列表
                          </el-button>
                          <el-button
                            type="danger"
                            size="mini"
                            plain
                            @click="deleteRoom(item.id)"
                          >
                            删除房间
                          </el-button>
                        </div>
                      </div>
                    </div>
                    <div class="bedlist-content">
                      <div class="tpl2-wrap">
                        <div
                          v-for="(bed, bedidx) in floor.bed_list"
                          :key="bedidx"
                          class="tpl2-left"
                        >
                          <div class="tpl2-title">
                            {{ bed.bed_code }}床
                            <el-tag
                              size="mini"
                              :type="
                                bed.status == 1
                                  ? 'info'
                                  : bed.status == 2
                                  ? 'succes'
                                  : 'warning'
                              "
                              style="cursor: pointer"
                              @click="handleElderDetail(bed.e_id)"
                            >
                              {{
                                bed.status == 1
                                  ? "床位空闲"
                                  : bed.status == 2
                                  ? "有人入住"
                                  : "有人预约"
                              }}
                            </el-tag>
                          </div>
                          <!-- <div class="tpl2-content">
                                  <span>刘振好</span>
                                  <span>男</span>
                                  <span>78</span>
                              </div> -->
                              
                          <!-- <div class="tpl2-action">
                            <span :data-id="bed.id" @click="handleEquip(floor.id, bed.id)">
                              设备列表
                            </span>
                           <span :data-id="bed.id" @click="handleNurse">
                              护工管理
                            </span>
                          </div> -->
                          <div class="tpl2-action">
                            <p><span>老人姓名：</span>{{ bed.elder && bed.elder.name || '暂无' }}</p>
                            <p><span>老人性别：</span>{{ bed.elder && (bed.elder.sex == 1 ? '男' : bed.elder.sex == 2 ?'女' : "暂无") }}</p>
                            <p><span>老人年龄：</span>{{ bed.elder && bed.elder.age || '暂无' }}</p>
                          <!--  <p><span>实时心率：</span>{{ bed.elder && bed.elder.sex }}</p> -->
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </template>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="房间管理"
      :visible.sync="dialogVisibleRoom"
      width="35%"
      :before-close="closeDialogRoom"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <room-form></room-form>
      </div>
    </el-dialog>
    <el-dialog
      :title="deviceTitle"
      :visible.sync="dialogVisibleEq"
      width="60%"
      :before-close="closeDialogEq"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              已绑定设备列表
            </el-col>
            <!-- <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              房间设备列表
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              厕所设备列表
            </el-col> -->
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-table
              :data="binddeviceList"
              stripe
              :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
            >
              <el-table-column
                v-for="(item, index) in tableColumns"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :formatter="item.formatter"
                :filters="item.filters"
                :class-name="item.className"
                :show-overflow-tooltip="true"
              ></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <el-dialog
        width="30%"
        title="绑定设备"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-form
          ref="sbForm"
          :model="sbForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="设备名称" prop="gender">
                <el-input v-model="sbForm.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="设备编号" prop="gender">
                <el-select
                  v-model="sbForm.gender"
                  clearable
                  placeholder="请选择"
                  filterable
                  style="width: 100%"
                >
                  <el-option :key="0" label="男" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button type="primary" class="sureBtn" size="mini">
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="mini"
            @click="handlSbFormClose"
          >
            取 消
          </el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <el-dialog
      title="护工管理"
      :visible.sync="dialogVisibleNurse"
      width="60%"
      :before-close="closeDialogNurse"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row>
            <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
              <el-button
                type="primary"
                icon="el-icon-plus"
                class="sureBtn"
                size="mini"
                :data-id="bed_id"
                @click="handleAddNurse"
              >
                设置护工
              </el-button>
            </el-col>
          </el-row>
        </div>
        <el-table
          :data="data2"
          stripe
          :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
        >
          <el-table-column
            v-for="(item, index) in tableColumns2"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="item.formatter"
            :filters="item.filters"
            :class-name="item.className"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
            <!-- <el-button
                size="mini"
                type="success"
                @click="handleEditNurse(scope.$index, data2)"
              >
                编辑
              </el-button> -->
              <el-button
                size="mini"
                type="danger"
                @click="handleDeleteNurse(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        width="30%"
        title="新增/编辑护工"
        :visible.sync="innerVisibleNurse"
        :before-close="closeVisibleNurse"
        append-to-body
        :close-on-click-modal="false"
      >
        <el-form
          ref="hsForm"
          :model="hsForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
          size="medium"
        >
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="护工姓名" prop="c_id">
                <el-select
                  v-model="hsForm.c_id"
                  clearable
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请输入姓名"
                  :remote-method="remoteMethod"
                  :loading="loading"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item, index) in nurseData"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item label="护工工号" prop="c_id">
                <el-input v-model="hsForm.c_id" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-footer">
          <el-button
            type="primary"
            class="sureBtn"
            size="mini"
            @click="saveNurse"
          >
            提 交
          </el-button>
          <el-button
            type="info"
            class="setBtn"
            size="mini"
            @click="cancel('hsForm')"
          >
            取 消
          </el-button>
        </div>
      </el-dialog>
    </el-dialog>
    <el-dialog
      width="28%"
      :title="elderData.base.name"
      :visible.sync="elderTk"
      append-to-body
      class="elderTk"
      :close-on-click-modal="false"
    >
      <div class="elderWrapper">
        <div class="elderAvatar">
          <img
            :src="
              elderData.base.profile
                ? elderData.base.profile
                : require('@/assets/images/avatar.jpg')
            "
            alt=""
          />
        </div>
        <div class="elderInfo">
          <p>
            姓名：
            <span>{{ elderData.base.name }}</span>
          </p>
          <p>
            性别：
            <span>{{ elderData.base.sex | sexFilter }}</span>
          </p>
          <p>
            年龄：
            <span>{{ elderData.base.age }}</span>
          </p>
          <p>
            电话：
            <span>{{ elderData.base.mobile }}</span>
          </p>
          <p>
            身份证：
            <span>{{ elderData.base.id_card }}</span>
          </p>
          <p>
            老人类型：
            <span>{{ elderData.base.type | typeFilter }}</span>
          </p>
          <p>
            监护人：
            <span>{{ elderData.family.name }}</span>
          </p>
          <p>
            地址：
            <span>{{ elderData.base.address }}</span>
          </p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import roomForm from "@/components/CommonForm/roomForm";
  import { getRoom } from "@/api/building";
  import { getList } from "@/api/bedList";
  import { getOlder } from "@/api/oldermanager";
  import { getBedType } from "@/api/bedType";
  import { setNurse, getHgList, getNurseList } from "@/api/nursemanager";
  import { getBuilding, getFloor, getroomlist } from "@/api/building";
  import { devicebind, getdevice, getdevicelist } from "@/api/device";
  import dictData from "@/utils/dictionary";
  const dict = dictData;
  export default {
    name: "Index",
    components: { roomForm },
    filters: {
      sexFilter(value) {
        if (value == 1) {
          return "男";
        } else if (value == 2) {
          return "女";
        } else {
          return "未填写";
        }
      },
      typeFilter(value) {
        for (let i = 0; i < dict.olderType.length; i++) {
          const element = dict.olderType[i];
          if (value == i + 1) {
            return element;
          }
        }
      },
    },
    data() {
      return {
        activename: "",
        flooractivename: "",
        bed_id: "",
        pageNo: 0,
        pageSize: 10,
        layout: "total, prev, pager, next, jumper",
        total: 0,
        building_id: "",
        floor_id: "",
        bedType_id: "",
        loading: false,
        elderTk: false,
        background: true,
        dialogVisible: false,
        dialogVisibleBed: false,
        dialogVisibleLive: false,
        dialogVisibleRoom: false,
        dialogVisibleEq: false,
        innerVisible: false,
        dialogVisibleNurse: false,
        innerVisibleNurse: false,
        nurseData: [],
        bedTypeData: [],
        buildingData: [],
        floorData: [],
        backgroundColor: ["colorType0", "colorType1", "colorType2"],
        formData: {},
        sbForm: {},
        hsForm: {},
        elderData: {
          base: {},
          family: {},
        },
        data: [],
        data2: [],
        rules: {},
        pageDataList: [],
        selectForm: {},
        tableColumns: [
          { prop: "code", label: "设备编号" },
          { prop: "name", label: "设备名称" },
          { prop: "type", label: "设备类型", formatter: this.genderFormatter },
        ],
        tableColumns2: [
          { prop: "name", label: "护士姓名" },
          { prop: "c_id", label: "护士工号" },
        ],
        loadingWrap: true,
        room_id: "",
        roombed_id: "",
        deviceTitle: "已设备绑定列表",
        unbinddeviceList: [],
        binddeviceList: [],
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      this.getNurseData();
      this.getBuildingData();
      this.getBedTypeData();
    },
    methods: {
      genderFormatter(row, column) {
        if (row.type == 1) {
          return "灯";
        } else if (row.type == 2) {
          return "报警器";
        } else if (row.type == 3) {
          return "门传感器";
        }
      },
      getBuildingData(data) {
        getBuilding("get", data).then((resp) => {
          if (resp.code === 200) {
            this.buildingData = resp?.data?.list.reverse() || [];
            this.building_id = this.buildingData[0].id;
            this.activename = this.buildingData[0].name;
            let params = {
              building_id: this.building_id,
            };
            if (this.building_id) this.getFloorData(params);
          }
        });
      },
      getFloorData(data) {
        getFloor("get", data).then((resp) => {
          if (resp.code === 200) {
            this.floorData = resp?.data?.list.reverse() || [];
            if (resp.data.list.length == 0) return;
            this.floor_id = this.floorData[0].id;
            this.flooractivename = this.floorData[0].name;
            this.getTableData(resp.data.list[0].id);
          }
        });
      },
      handleSelectBuilding(tab) {
        let params = {
          building_id: tab.$attrs.datafloorid,
        };
        if (tab.$attrs.datafloorid) this.getFloorData(params);
      },
      getTableData(floor_id) {
        this.selectForm = {
          page_size: 120,
          floor_id,
        };

        getList("get", this.selectForm).then((resp) => {
          if (resp.code === 200) {
            const data = resp.data?.list || [];
            data.map((item) => {
              let obj = {};
              obj.status1 = item.bed_list.filter((i) => {
                return i.status == 1;
              });
              obj.status2 = item.bed_list.filter((i) => {
                return i.status == 2;
              });
              obj.status3 = item.bed_list.filter((i) => {
                return i.status == 3;
              });
              item.status =
                obj.status1.length > 0 &&
                obj.status2.length > 0
                  ? 3
                  : obj.status1.length + obj.status3.length == item.bed_list.length
                  ? 2
                  : 1;
            });
            this.pageDataList = data;
            console.log('data', data)
            this.loadingWrap = false;
          }
        });
      },
      handleTabFloorClick(tab) {
        this.loadingWrap = true;
        this.getTableData(tab.$attrs.datafloorid);
      },
      getBedTypeData(data) {
        getBedType("get", data).then((resp) => {
          if (resp.code === 200) {
            this.bedTypeData = resp.data.list;
            this.bedType_id = this.bedTypeData[0].id;
          }
        });
      },
      saveNurse() {
        this.$refs["hsForm"].validate(async (valid) => {
          if (valid) {
            if (this.hsForm.id) {
              setNurse("put", {
                id: this.hsForm.id,
                bed_id: this.hsForm.bed_id,
                c_id: this.hsForm.c_id,
              }).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.cancel("hsForm");
                  let params = {
                    bed_id: this.bed_id,
                  };
                  this.getNurseList(params);
                  this.getNurseData();
                } else {
                  this.$message({
                    type: "success",
                    message: resp.msg,
                  });
                }
              });
            } else {
              setNurse("post", this.hsForm).then((resp) => {
                if (resp.code === 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.cancel("hsForm");
                  let params = {
                    bed_id: this.bed_id,
                  };
                  this.getNurseList(params);
                  this.getNurseData();
                }
              });
            }
          }
        });
      },
      getNurseData() {
        let params = {
          page_size: 1000,
        };
        getHgList("get", params).then((resp) => {
          if (resp.code === 200) {
            this.nurseData = resp.data.list;
          }
        });
      },
      getNurseList(data) {
        getNurseList("get", data).then((resp) => {
          if (resp.code === 200) {
            this.data2 = resp.data.list;
          }
        });
      },
      remoteMethod(query) {
        let _this = this;
        if (query !== "") {
          this.loading = true;
          setTimeout(() => {
            let data = {
              name: query,
            };
            getHgList("get", data).then((resp) => {
              if (resp.code === 200) {
                console.log(resp);
                _this.loading = false;
                _this.nurseData = resp.data.list;
              }
            });
          }, 200);
        } else {
          this.getNurseData();
        }
      },
      handleSizeChange(val) {},
      handleCurrentChange(val) {
        this.selectForm.page = val;
        this.getTableData();
      },
      handleRoom() {
        this.dialogVisibleRoom = true;
      },
      closeDialogRoom() {
        this.dialogVisibleRoom = false;
      },
      devicebind(item) {
        this.room_id = item.id;
        this.dialogVisibleEq = true;
        getdevicelist("get", { room_id: item.id }).then((res) => {
          this.binddeviceList = res?.data || [];
        });
        // getdevice("get", { status: 1 }).then((res) => {
        //   this.unbinddeviceList = res.data?.list;
        // });
      },
      deleteRoom(id) {
        this.$confirm("此操作将永久删除该房间, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: id,
            };
            getRoom("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getTableData();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleEquip(room_id, roombed_id) {
        this.dialogVisibleEq = true;
        this.room_id = room_id;
        this.roombed_id = roombed_id;
        devicebind("get", { room_id, bed_id: roombed_id }).then((res) => {
          this.binddeviceList = res.data?.list;
        });
        // getdevice("get", { status: 1 }).then((res) => {
        //   this.unbinddeviceList = res.data?.list;
        // });
      },
      handleEditEq(row) {
        if(this.roombed_id) {
          devicebind("post", { room_id: this.room_id, bed_id: this.roombed_id, code: row.code }).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
            });
            devicebind("get", { room_id: this.room_id, bed_id: this.roombed_id }).then((data) => {
              this.binddeviceList = data.data?.list;
            });
          }).catch(err => {
            console.log(err)
            this.$message({
              type: "info",
              message: "请联系管理员",
            });
          })
        } else {
          devicebind("post", { room_id: this.room_id, code: row.code }).then((res) => {
            console.log(res)
            this.$message({
              type: "success",
              message: res.msg,
            });
            getdevicelist("get", { room_id: this.room_id }).then((data) => {
              this.binddeviceList = res?.data || [];
            });
          }).catch(err => {
            console.log(err)
            this.$message({
              type: "info",
              message: "请联系管理员",
            });
          })
        }
        
      },
      handlSbFormClose() {
        this.innerVisible = false;
      },
      closeDialogEq() {
        this.dialogVisibleEq = false;
      },
      handleDeleteEq() {},
      handleNurse(id) {
        this.dialogVisibleNurse = true;
        this.$set(this.hsForm, "bed_id", id);
        this.bed_id = id;
        let params = {
          bed_id: id,
        };
        this.getNurseList(params);
      },
      cancel(formName) {
        this.innerVisibleNurse = false;
        this.$refs[formName].resetFields();
        this[formName] = {};
      },
      closeVisibleNurse() {
        this.innerVisibleNurse = false;
        this.$refs["hsForm"].resetFields();
        this["hsForm"] = {};
      },
      handleAddNurse(e) {
        let id = e.currentTarget.dataset.id;
        this.$set(this.hsForm, "bed_id", id);
        this.bed_id = id;
        this.innerVisibleNurse = true;
      },
      closeDialogNurse() {
        this.dialogVisibleNurse = false;
        this.data2 = [];
      },
      handleEditNurse(index, data) {
        this.innerVisibleNurse = true;
        this.hsForm = Object.assign({}, data[index]);
        console.log(this.hsForm)
      },
      handleDeleteNurse(id) {
        this.$confirm("此操作将永久删除该护工, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              id: id,
            };
            getNurseList("delete", param).then((resp) => {
              if (resp.code === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                let params = {
                  bed_id: this.bed_id,
                };
                this.getNurseList(params);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      handleElderDetail(id) {
        if (id == 0) return;
        let params = {
          id: id,
        };
        getOlder("get", params).then((resp) => {
          if (resp.code === 200) {
            this.elderTk = true;
            this.elderData = resp.data;
          }
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .index-container {
    ::v-deep {
      .el-col {
        margin: 10px 0;
      }
      .el-tabs--border-card{
        background: #86693f;
      }
    }
    .dialog-main {
      .table-do {
        margin-bottom: 15px;
      }

      ::v-deep {
        th {
          .cell {
            color: #fff;
          }
        }
      }
    }
    .bedlist-item {
      width: 100%;
      border-radius: 4px;
      overflow: hidden;
      box-sizing: border-box;
      .bedlist-item-header {
        width: 100%;
        font-size: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid #dddfe7;
        box-sizing: border-box;
        .bedlist-item-hl {
          display: inline-block;
          width: 30%;
          text-align: center;
          //color: darkred;
          color: #fff;
          font-weight: bold;
        }
        .bedlist-item-hr {
          display: inline-block;
          width: 70%;
          border-left: 1px solid #dddfe7;
          padding: 10px 0;
          .bedlist-item-hrt {
            font-size: 16px;
            margin-bottom: 10px;
            text-align: center;
            color: #fff;
            height: 44px;
          }
          .bedlist-item-hrb {
            border-top: 1px solid #dddfe7;
            margin-top: 10px;
            text-align: right;
            padding: 10px 10px 0 10px;
            ::v-deep {
              .el-button--mini {
                padding: 5px 6px;
              }
            }
          }
        }
      }
    }
    .colorType0 {
      background: #18ba39;
    }
    .colorType1 {
      background: #e0c720;
    }
    .colorType2 {
      background: #999;
    }
    .tpl2-wrap {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #dddfe7;
      border-top: none;
      display: flex;
      justify-content: space-between;
      overflow-x: scroll;
      .tpl2-left {
        width: 50%;
        padding: 10px;
        &:nth-child(n + 2) {
          border-left: 1px solid #dddfe7;
        }
      }
      .tpl2-title {
        color: #f60;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
      }
      .tpl2-content {
        display: flex;
        justify-content: space-between;
        margin: 10px;
      }
      // .tpl2-action {
      //   display: flex;
      //   justify-content: space-between;
      //   margin-top: 20px;
      //   span {
      //     cursor: pointer;
      //     &:hover {
      //       color: #1791ff;
      //     }
      //   }
      // }
      .tpl2-action {
        margin-top: 20px;
        white-space: nowrap;
        p{
          margin: 5px 0;
          font-weight: bold;
          font-size: 16px;
          span{
            color: #999;
          }
        }
      }
      .elderWrapper {
        display: flex;

        .elderAvatar {
          display: flex;
          flex: 0 0 200px;
          align-items: center;
          width: 200px;
          height: 200px;
          margin-right: 20px;
          overflow: hidden;
          border-radius: 5px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .elderInfo {
          p {
            width: 202px;
            overflow: hidden;
            font-style: 14px;
            line-height: 24px;
            color: #fff;
            text-overflow: ellipsis;
            white-space: nowrap;

            span {
              color: #2cc1bb;
            }
          }
        }
      }
    }
  }
  .elderTk {
    ::v-deep {
      .el-dialog {
        background: rgba($color: #0c232f, $alpha: 0.5);
      }

      .el-dialog__header {
        background: rgba($color: #0c232f, $alpha: 0.5);
      }

      .el-dialog__body {
        padding: 15px 15px;
        overflow: hidden;
      }
    }

    .elderWrapper {
      display: flex;

      .elderAvatar {
        display: flex;
        flex: 0 0 200px;
        align-items: center;
        width: 200px;
        height: 200px;
        margin-right: 20px;
        overflow: hidden;
        border-radius: 5px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .elderInfo {
        p {
          width: 202px;
          overflow: hidden;
          font-style: 14px;
          line-height: 24px;
          color: #fff;
          text-overflow: ellipsis;
          white-space: nowrap;

          span {
            color: #2cc1bb;
          }
        }
      }
    }
  }
</style>
